{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
    用户登录
{% endblock %}

{% block css %}
     <link rel="stylesheet" href="{% static 'css/account.css' %}">
     <style>
         /* 在登录页面隐藏导航栏右侧的用户菜单 */
         .navbar-nav.navbar-right {
             display: none;
         }
     </style>
{% endblock %}


{% block content %}
    <div class="account">
        <div class="title">用户登录</div>
        <form id="loginForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="row">
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-xs-5">
                                <img id="codeImage" src="/web/code/" alt="验证码" onclick="this.src='/web/code/?t='+Math.random()" style="cursor: pointer; height: 34px; width: 100%;">
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}

            <div class="form-group">
                <input id="btnSubmit" type="button" value="登录"/>
            </div>
            <div class="form-group">
                <p>还没有账号？<a href="{% url 'register' %}">立即注册</a></p>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
   <script>

    //页面框架加载完成之后自动执行函数
    $(function() {
        console.log('页面加载完成，绑定按钮事件');
        bindClickBtnSubmit();
    });
    
    // 绑定登录按钮点击事件
    function bindClickBtnSubmit() {
        console.log('绑定登录按钮事件开始');
        var $btnSubmit = $('#btnSubmit');
        console.log('找到按钮元素:', $btnSubmit.length);
        $btnSubmit.click(function() {
            console.log('登录按钮被点击');
            // 获取表单数据
            var formData = {
                username: $('#id_username').val(),
                password: $('#id_password').val(),
                code: $('#id_code').val(),
                csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
            };
            console.log('表单数据:', formData);
            // 简单验证
            if (!formData.username || !formData.password || !formData.code) {
                alert('请填写所有必填字段');
                return;
            }
            // 防止重复点击
            $btnSubmit.prop('disabled', true).val('登录中...');
            // 发送ajax请求
            $.ajax({
                url: '/web/login/',
                type: 'POST',
                data: formData,
                success: function(res){
                    console.log('请求成功:', res);
                    if (res.status) {
                        alert('登录成功');
                        // 添加详细调试信息
                        console.log('当前URL:', window.location.href);
                        console.log('尝试跳转的URL:', '/web/index/');
                        console.log('window.location对象:', window.location);
                        // 延迟1秒后跳转，以便查看调试信息
                        setTimeout(function() {
                            window.location.href = '/web/index/';
                        }, 1000);
                    } else {
                        alert('登录失败: ' + (res.error || '未知错误'));
                        // 刷新验证码
                        $('#codeImage').attr('src', '/web/code/?t=' + Math.random());
                    }
                },
                error: function(xhr, status, error){
                    console.error('请求失败:', status, error);
                    alert('登录失败，请重试');
                    // 刷新验证码
                    $('#codeImage').attr('src', '/web/code/?t=' + Math.random());
                },
                complete: function(){
                    // 恢复按钮状态
                    $btnSubmit.prop('disabled', false).val('登录');
                }
            });
        });
        console.log('绑定登录按钮事件完成');
    }

   </script>
{% endblock %}